<template>
  <div id="index">
    <header>
      <p><img src="../img/logo.jpg" alt="" /></p>
      <van-search
        placeholder="搜索疾病/症状/药品名"
        style="width: 100%; height: 40px"
        shape="round"
        @click="$router.push('/search')"
      />
    </header>
    <nav>
      <van-grid :border="false" clickable :column-num="3">
        <van-grid-item
          v-for="item in navListBig"
          :key="item.name"
          :to="item.to"
        >
          <img :src="item.img" alt="" />
          <h3>{{ item.name }}</h3>
          <p>{{ item.info }}</p>
        </van-grid-item>
      </van-grid>
      <van-grid :border="false" clickable :column-num="5">
        <van-grid-item
          v-for="item in navListSma"
          :key="item.name"
          :icon="item.img"
          :text="item.name"
          :to="item.to"
          @click="store.changeParams({ sort_type: 'weight' })"
        >
        </van-grid-item>
      </van-grid>
    </nav>
    <div class="swiper">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        lazy-render
        indicator-color="white"
      >
        <van-swipe-item v-for="item in bannerList" :key="item.id">
          <a :href="item.link.replace('https://m.moguvet.com', '')">
            <img class="bannerImg" :src="item.cover" />
          </a>
        </van-swipe-item>
      </van-swipe>
    </div>
    <Symptoms />
    <DoctorTabs />
  </div>
</template>
<script setup>
import { ref } from "vue";
import { getBanners, getTabs } from "../API";
import { useCount } from "../store/index.js";
import DoctorTabs from "../components/Doctor/DoctorTabs.vue";
import Symptoms from "../components/Symptoms.vue";
let store = useCount();
let navListBig = ref([]);
let navListSma = ref([]);
navListBig.value = [
  {
    name: "问宠医",
    img: "https://cdn.moguvet.com/custom/front/c/home/navwcy.png",
    info: "名医快速回复",
    to: "/consult",
  },
  {
    name: "去开药",
    img: "https://cdn.moguvet.com/custom/front/c/home/navqky.png",
    info: "快速送货上门",
    to: "/medicine",
  },
  {
    name: "健康馆",
    img: "https://cdn.moguvet.com/custom/front/c/home/navjkg.png",
    info: "健康主题商店",
    to: "/shop",
  },
];
navListSma.value = [
  {
    name: "极速问诊",
    img: "https://cdn.moguvet.com/custom/front/c/minejswz.png",
    to: "/consult/text",
  },
  {
    name: "电话急诊",
    img: "https://cdn.moguvet.com/custom/front/c/minedhjz.png",
    to: "/consult/tel",
  },
  {
    name: "专家问诊",
    img: "https://cdn.moguvet.com/custom/front/c/minezjwz.png",
    to: "/doctor/list",
  },
  {
    name: "能不能吃",
    img: "https://cdn.moguvet.com/custom/front/c/minenbnc.png",
    to: "/nbnc",
  },
  {
    name: "问诊病例",
    img: "https://cdn.moguvet.com/custom/front/c/minecase.png",
    to: "/askList",
  },
];

// 请求轮播图接口
let bannerList = ref([]);
let getBannerList = async () => {
  let { data } = await getBanners();
  // console.log(data);
  bannerList.value = data.data.slice(3);
  // console.log(bannerList);
};
getBannerList();
store.changeParams({ code: 410100 });
</script>
<style scoped>
#index {
  padding: 10px 20px;
}
header p {
  width: 100%;
  height: 122px;
  margin-bottom: 10px;
}
header p img {
  width: 320px;
  height: 122px;
}
nav img {
  width: 125px;
  height: 125px;
}
nav p {
  margin-top: 5px;
  color: #999;
}
.bannerImg {
  width: 95%;
  border-radius: 20px;
}
.swiper {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}
</style>